<style lang="less" scoped>
  @import './index.less';
</style>
<template>
  <div class="indexWrap" ref="wrap">
    <header ref="header">
      <div class="content">
        <Row>
          <Col span="5">
            <h1>
              <router-link to="/">Max</router-link>
            </h1>
            <h2>Beijing,China</h2>
          </Col>
          <Col span="19">
            <Row type="flex" justify="end" class="nav">
              <Col span="4" v-for="(item, index) in navList">
                <router-link :to="item.url" :key="index">{{item.nav_name}}</router-link>
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    </header>
    <section id="contentWrap">
      <div class="contentList">
        <Row :gutter="18">
          <Col span="6">
            <router-link class="imgWrap" to="/">
              <img src="http://7xs8wb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/10/IMG_1101-800x600.jpg"
                   alt="">
            </router-link>
            <router-link class="title" to="/">Lea</router-link>
            <router-link class="time" to="/">Oct 09, 2016</router-link>
          </Col>
          <Col span="6">
            <router-link class="imgWrap" to="/">
              <img src="http://7xs8wb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/10/fengmian-800x600.jpg"
                   alt="">
            </router-link>
            <router-link class="title" to="/">Lea</router-link>
            <router-link class="time" to="/">Oct 09, 2016</router-link>
          </Col>
          <Col span="6">
            <router-link class="imgWrap" to="/">
              <img src="http://7xs8wb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/03/FullSizeRender-11-2-800x600.jpg"
                   alt="">
            </router-link>
            <router-link class="title" to="/">Lea</router-link>
            <router-link class="time" to="/">Oct 09, 2016</router-link>
          </Col>
          <Col span="6">
            <router-link class="imgWrap" to="/">
              <img src="http://7xs8wb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/08/image-3-800x600.jpeg"
                   alt="">
            </router-link>
            <router-link class="title" to="/">Lea</router-link>
            <router-link class="time" to="/">Oct 09, 2016</router-link>
          </Col>
        </Row>
      </div>
      <div class="contentList">
        <Row :gutter="18">
          <Col span="6">
            <router-link class="imgWrap" to="/">
              <img src="http://7xs8wb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/10/IMG_1101-800x600.jpg"
                   alt="">
            </router-link>
            <router-link class="title" to="/">Lea</router-link>
            <router-link class="time" to="/">Oct 09, 2016</router-link>
          </Col>
          <Col span="6">
            <router-link class="imgWrap" to="/">
              <img src="http://7xs8wb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/10/fengmian-800x600.jpg"
                   alt="">
            </router-link>
            <router-link class="title" to="/">Lea</router-link>
            <router-link class="time" to="/">Oct 09, 2016</router-link>
          </Col>
          <Col span="6">
            <router-link class="imgWrap" to="/">
              <img src="http://7xs8wb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/03/FullSizeRender-11-2-800x600.jpg"
                   alt="">
            </router-link>
            <router-link class="title" to="/">Lea</router-link>
            <router-link class="time" to="/">Oct 09, 2016</router-link>
          </Col>
          <Col span="6">
            <router-link class="imgWrap" to="/">
              <img src="http://7xs8wb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/08/image-3-800x600.jpeg"
                   alt="">
            </router-link>
            <router-link class="title" to="/">Lea</router-link>
            <router-link class="time" to="/">Oct 09, 2016</router-link>
          </Col>
        </Row>
      </div>
    </section>
    <div class="page">
      <div class="btnWrap">
        <a class="pre" href="javascript:;">&larr; Pre</a>
        <a class="next" href="javascript:;">Next &rarr;</a>
      </div>
    </div>
    <footer>
      <div class="footerWrap">
        <p>&copy; 2018 Max</p>
      </div>
    </footer>
  </div>
</template>

<script>
import axios from 'axios'
import API_URL from '@/api/api'
export default {
  name: 'index',
  data () {
    return {
      navList: []
    }
  },
  mounted () {
    this.headerShadow()
    this.getNavList()
  },
  methods: {
    headerShadow () {
      this.$refs.wrap.onscroll = () => {
        let top = this.$refs.wrap.scrollTop
        if (top > 100) {
          this.$refs.header.style.boxShadow = '0 0px 10px 0px rgba(0, 0, 0, 0.2)'
        } else {
          this.$refs.header.style.boxShadow = 'none'
        }
      }
    },
    async getNavList () {
      let result = await axios.get(API_URL.sortNavList).then(res => {
        return res.data
      })
      this.navList = result.data.list
    }
  }
}
</script>
